
<template>
  <!--右侧开始-->
  <div>
      <div class="topSearch">
        <div class="leftBox" style="max-width:100%">
          <div class="searchbox">
            <em>学年：</em>
            <el-select v-model="select.xuenian" size="small" placeholder="请选择学年">
              <el-option v-for="(item,index) in select.yearList" :key="index" :label="item.timeName" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="searchbox">
            <em>缴费方案名称：</em>
            <el-select v-model="select.paymentSchemeId" @change="changeTName" size="small" filterable placeholder="请选择缴费方案名称">
              <el-option v-for="item in select.paymentSchemeList" :key="item.projectId" :label="item.projectName" :value="item.projectId"
              ></el-option>
            </el-select>
          </div>

          <div class="searchbox">
            <em>缴费类型：</em>
            <el-select v-model="select.category" placeholder="输入学校名称" size="small" style="width:80px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in select.categoryList" :key="item.category" :label="item.categoryName" :value="item.category"></el-option>
            </el-select>
          </div>

          <div class="searchbox">
            <em>校区：</em>
            <el-select v-model="select.schoolId" @change="changeSchool" placeholder="输入学校名称" size="small" width="80" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in select.schoolList" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId"></el-option>
            </el-select>
          </div>

          <div class="searchbox">
            <em>年级：</em>
            <el-select v-model="select.gradeId" @change="changeGrade" placeholder="输入学校名称" size="small" style="width:80px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in select.gradeList" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId"></el-option>
            </el-select>
          </div>

          <div class="searchbox">
            <em>班级：</em>
            <el-select v-model="select.classId" placeholder="输入学校名称" :disabled="select.studentSource=='Sign'" size="small" style="width:80px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in select.classList" :key="item.classId" :label="item.className" :value="item.classId"></el-option>
            </el-select>
          </div>

          <div class="searchbox">
            <em>学生姓名或身份证号：</em>
            <el-input v-model="select.nameOrIDNumber" style="width:180px;" placeholder="请输入学生姓名或身份证号" clearable size="small"></el-input>
          </div>

          <div class="searchbox">
            <em>是否减免：</em>
            <el-radio-group v-model="select.isReduction" style="line-height: 40px; vertical-align: middle; display: inline-block;">
              <el-radio label="">全部</el-radio>
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
          </div>

          <div class="searchbox">
            <el-button type="primary" @click="getData" size="mini">查询</el-button>
            <el-button type="primary" @click="exportOut" size="mini">导出</el-button>
          </div>

        </div>
        <!-- <div class="rightBox">
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
        </div> -->
        <div class="clear"></div>
      </div>
      <div class="contentBox" style="height:86%;" >
    <el-table :data="data" :header-cell-style="headClass" border stripe style="width: 100%" height="90%" >
      <el-table-column prop="projectName" label="缴费方案" width="180"></el-table-column>
      <el-table-column prop="schoolName" label="所在校区" width="200"></el-table-column>
      <el-table-column prop="graduateYear" label="毕业年份" width="120"></el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
      <el-table-column prop="identityCardNumber" label="身份证号" width="200"></el-table-column>
      <el-table-column prop="paymentCategoryName" label="学生类型" width="120"></el-table-column>
      <el-table-column prop="gradeName" label="就读年级"></el-table-column>
      <el-table-column label="就读班级">
        <template slot-scope="scope">
          <span v-if="scope.row.className==''||scope.row.className==null||scope.row.className==undefined">未分班级</span>
          <span v-else>{{scope.row.className}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payableMoney" label="各项费用总计">
        <template slot-scope="scope">
          <el-button type="text" @click="see(scope.row)" v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined">0.00</el-button>
          <!-- <el-button type="text" @click="see(scope.row)" :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.payableMoney|moneyStyle}}</el-button> -->
          <el-button type="text" @click="see(scope.row)" :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{zongjiMoney(scope.row)|moneyStyle}}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="gexiangfeiyongmingxi" label="各项费用明细" width="110">
        <template slot-scope="scope">
          <el-button @click="see(scope.row)" type="primary" size="mini">查看</el-button>
        </template>
      </el-table-column> -->
      <el-table-column  label="减免金额">
        <template slot-scope="scope">
            <span v-if="scope.row.tuitionMoney==''||scope.row.tuitionMoney==null||scope.row.tuitionMoney==undefined" style="color:#e8851e;">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.tuitionMoney?scope.row.tuitionMoney:0).toFixed(2)*1000<0}" style="color:#e8851e;" v-else>{{scope.row.tuitionMoney|moneyStyle}}</span>
          </template>
      </el-table-column>
      <el-table-column label="应收金额">
         <template slot-scope="scope">
           <!-- <span>{{scope.row.payableMoney-scope.row.tuitionMoney}}</span> -->
           <span :class="{fuFont:parseFloat(qianjiao(scope.row)).toFixed(2)*1000<0}">{{qianjiao(scope.row)}}</span>
         </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注">
      </el-table-column>
      <el-table-column v-if="$store.state.userModule.roleList.indexOf('GroupManager')>=0||$store.state.userModule.roleList.indexOf('GroupFinance')>=0" label="操作" fixed="right" width="110">
        <template slot-scope="scope">
          <el-button @click="setReduction(scope.row)" :disabled="scope.row.isTuition==1||scope.row.isPaymentTuition==1" type="primary" size="mini">设置减免</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
        <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
      </div>
    </div>

      <!-- 弹层内容 -->
    <el-dialog title="各项费用明细" :visible.sync="dialogDetailed.show">
      <div class="layerBox">
        <div class="layerDetailedList">
          <dl v-for='d in dialogDetailed.data' :key="d.itemId">
            <dt>{{d.itemName}}</dt>
            <dd>{{d.money}}</dd>
          </dl>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogDetailed.show=!dialogDetailed.show">确定</el-button>
      </div>
    </el-dialog>

  </div>
  <!--右侧结束-->
</template>

<script>
export default {
  name: "receivable",
  data() {
    return {
      pageIndex:1,
      pageAll:0,
      select: {
        xuenian:'',
        yearList:[],
        schoolList: [],
        schoolId: "",
        gradeList:[],
        gradeId:"",
        category:'',
        categoryList:[],
        classList:[],
        classId:"",
        paymentSchemeList: [],
        paymentSchemeId: [],
        name: "",
        nameOrIDNumber: "",
        isReduction:'',
        dateB:'',
        dateE:'',
        studentSource:''
      },
      data: [],
      dialogDetailed: {
        show: false,
        student: [],
        data: []
      },
      pickerOptionsBegin:{
         disabledDate:time=>{
          return time.getTime() > new Date(this.select.dateE).getTime();
        }
      },
      pickerOptionsEnd:{
         disabledDate:time=>{
          return time.getTime() < new Date(this.select.dateB).getTime();
        }
      }
    }
  },
  watch:{
    "select.xuenian":function(v){
      if(v){
        this.select.paymentSchemeId = "";
        this.select.schoolId = "";
        this.select.gradeId = ""
        this.data = [];
        this.getSearchP();
      }
    },
    "select.category":function(v){
      if(v){
        this.getData();
      }
    },
    "select.schoolId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.gradeId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.classId":function(v){
      if(v){
        this.getData();
      }
    }
  },
  filters:{
    moneyStyle(val){
      var nm = 0;
      nm = parseFloat(val).toFixed(2);
      return nm;
    }
  },
  mounted() {
    var that = this;
    that.getSchoolYearList();
    // that.getSearchP();
    // that.$nextTick(()=>{
    //   setTimeout(function(){
    //     that.getData();
    //   },800)
    // })
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 总计各项费用
    zongjiMoney(obg){
      var mny = obg.payableMoney;
      if(obg.isMilitaryTraining=="0"||obg.isMilitaryTraining=="否"){
        mny = (parseFloat(mny).toFixed(2)*1000 - parseFloat(obg.militaryTrainingMoney).toFixed(2)*1000) / 1000;
      }

      if(obg.isPhysicalExamination=="0"||obg.isPhysicalExamination=="否"){
        mny = (parseFloat(mny).toFixed(2)*1000 - parseFloat(obg.physicalExaminationMoney).toFixed(2)*1000) / 1000;
      }
      return mny;
    },
    // 欠缴
    qianjiao:function(obg){
      var numq = 0;
      numq = (parseFloat(obg.payableMoney==null?0:obg.payableMoney)*1000-parseFloat(obg.tuitionMoney==null?0:obg.tuitionMoney)*1000)/1000;
      return parseFloat(numq).toFixed(2);
    },
    // TODO:获取学年列表
    getSchoolYearList(){
      this.$api.systemSetup.GetSearchList("time").then(res=>{
        console.log("获取学年列表",res)
        this.select.yearList = res.data.result.timeList;
        if(res.data.result.timeList.length>0){
         this.select.xuenian = res.data.result.timeList[0].id;
        }
        this.getSearchP();
      })
    },
    // TODO:搜索项目
    getSearchP(project) {
      this.$api.reportForm.GetSearch("project","001",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res => {
        //console.log("获取缴费项",res);
        this.select.paymentSchemeList = res.data.result.projectList;
        this.select.paymentSchemeId = res.data.result.projectList[0].projectId;
        this.select.studentSource = res.data.result.projectList[0].studentSource;
        this.getSearchS();
      });
    },
    // TODO:获取搜索学校
    getSearchS:function(){
      this.$api.reportForm.GetSearch("school","001",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取学校列表",res1);
          this.select.schoolList = res1.data.result.schoolList;
          this.select.schoolId = res1.data.result.schoolList[0].schoolId;
          this.getSearchG();
          this.getData();
        });
    },
    //TODO: 获取搜索条件
    getSearchG:function(){
      this.$api.reportForm.GetSearch("gradeAndCategory","001",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取年级缴费类型",res1);
          this.select.categoryList = res1.data.result.categoryList;
          this.select.gradeList = res1.data.result.gradeList;
        });
    },
    //TODO: 获取班级
    getSearchC:function(){
      this.$api.reportForm.GetSearch("class","001",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取班级",res1);
          this.select.classList = res1.data.result.classList;
        });
    },
    // 缴费名称改变
    changeTName:function(event){
      this.select.schoolId="";
      for(var a=0,lenn = this.select.paymentSchemeList.length;a<lenn;a++){
        if(this.select.paymentSchemeList[a].projectId==event){
          this.select.studentSource = this.select.paymentSchemeList[a].studentSource;
        }
      }
      this.getSearchS()
    },
    // 学校改变
    changeSchool:function(){
      this.select.gradeId="";
      this.getSearchG()
    },
    // 年级改变
    changeGrade:function(){
      this.select.classId="";
      this.getSearchC()
    },
    // 获取数据列表
    getData() {
      var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category,studentQuery:this.select.nameOrIDNumber,isTuition:this.select.isReduction}
      this.$api.reportForm.GetReceivableList("list",params,this.pageIndex).then(res => {
        //console.log("获取应收列表",res);
        this.data = res.data.result.list;
        this.pageIndex = res.data.result.page;
        this.pageAll = res.data.result.total;
        this.data.forEach(e=>{
          if(e.isResidence=="0"||e.isResidence.replace(/\s*/g,"")=="否"){
            e.payableMoney = (parseFloat(e.payableMoney).toFixed(2)*1000-parseFloat(e.boarderMoney).toFixed(2)*1000)/1000
          }
        })
      });
    },
    see(k) {
      this.$api.reportForm.WatchPaymentAmount(k.projectId, k.schoolId, k.sectionId, k.gradeId, k.studentId, k.paymentCategory, k.isResidence, k.isMilitaryTraining, k.isPhysicalExamination).then(res=>{
        //console.log("查看缴费项目请",res);
        this.dialogDetailed.data =  res.data.result;
      })
      this.dialogDetailed.show = true;
    },
    // 分页页面切换
    handleCurrentChange:function(val){
      this.pageIndex = val;
      this.getData();
    },
    // 导出报表
    exportOut:function(){
      var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category,studentQuery:this.select.nameOrIDNumber,isTuition:this.select.isReduction}
      this.$api.reportForm.GetReceivableList("export",params,this.pageIndex).then(res => {
        //console.log("导出应收列表",res);
        window.open(res.data.result)
      });
    },
    setReduction:function(v){
      this.$api.reportForm.SetRelief(v.projectId,v.studentId,1).then(res=>{
        //console.log("设置减免内容",res);
        if(res.data.status=='SUCCESS'){
          this.$message({
            message:'设置减免成功',
            type:'success'
          })
          this.getData();
        }
      })
    }
  }
};
</script>

<style scoped>
</style>
